import IndexBar from '@/library/gallery/components/IndexBar'
import List from '@/library/gallery/components/List'
import { groups } from './utils'

const DemoIndexBar: React.FC<unknown> = () => (
  <div style={{ height: window.innerHeight }}>
    <IndexBar>
      {groups.map((group) => {
        const { title, items } = group
        return (
          <IndexBar.Panel
            index={title}
            title={`标题${title}`}
            key={`标题${title}`}
          >
            <List>
              {items.map((item, index) => (
                // eslint-disable-next-line react/no-array-index-key
                <List.Item key={String(index)}>{item}</List.Item>
              ))}
            </List>
          </IndexBar.Panel>
        )
      })}
    </IndexBar>
  </div>
)

export default DemoIndexBar
